<template>
	<view class="">
		<view class="white-bg">
			<!-- 关闭按钮 -->
			<view class="acea-row row-middle row-right title">
				<view class="close" @click.stop="close">
					<image src="../../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="content-box">
				<view class="list">
					<view class="acea-row row-middle row-between item border-b ">
						<view class="label label-m">
							商品名称
						</view>
						<view class="acea-row row-middle row-right item-r">
							<input class="input-r" type="text" placeholder="请输入商品名称"
								placeholder-class="placeholder-class" v-model="dataform.name" />
						</view>
					</view>
					<view class="acea-row row-middle row-between item border-b ">
						<view class="label">
							商品数量
						</view>
						<view class="acea-row row-middle row-right item-r">
							<input class="input-r" type="number" placeholder="请输入物品数量" 
								placeholder-class="placeholder-class" v-model="dataform.productNum" />
						</view>
					</view>
					<view class="acea-row row-middle row-between item border-b ">
						<view class="label label-m">商品价格</view>
						<view class="acea-row row-middle row-right item-r">
							<view class="acea-row row-middle row-right small-ipt">
								<input type="number" placeholder-class="placeholder-class" placeholder="实例:30" v-model="dataform.price">
								<text>元</text>
							</view>
						</view>
					</view>
					<!-- 上传照片/视频 -->
					<view class="module">
						<view class="acea-row row-middle row-between">
							<view class="module-title">
								上传照片/视频
							</view>
							<view class="example-text">
								图片示例
							</view>
						</view>
						<view class="example-text-l">
							请至少添加一张照片，图片越多审核越快
						</view>
						<view class="acea-row pictrue-list">
							<view class="acea-row row-column row-center-wrapper pictrue"
								v-for="(item,index) in shopfrontPhotoList" :key="index" @click="deleteImage(index)">
								<image style="width: 218rpx;height: 172rpx;" :src="item" mode=""></image>
							</view>
							<view class="acea-row row-column row-center-wrapper pictrue" @click="selectPicture"
								v-if="!shopfrontPhotoList.length<10">
								<view class="upload-icon">
									<image src="../../static/images/upload_icon.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- <view class="acea-row row-center row-center add-more-picture">
							<view>添加更多照片</view>
							<view class="jiantou-b"></view>
						</view> -->
					</view>

					<!-- 特色标签 -->
					<view class="module">
						<!-- <view class="acea-row row-middle row-between">
							<view class="module-title">
								特色标签
							</view>
							<view class="add-advantage red-sanjiao-r">
								没找到合适的？选择自定义
							</view>
						</view>
						<view class="acea-row advantage-list">
							<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
								v-for="(item,index) in advantages" :key="index" @click="advantageChecked(index)">
								{{item}}
							</view>
						</view> -->
						<chooseKeywords title="特色标签" :advantages="advantages" type="8" 
							:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
							@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
							@advantages="val=>(advantages=val)" @inited="csh" />
					</view>
					<!-- 描述 -->
					<view class="module">
						<view class="module-title">
							描述
						</view>
						<view class="textacea-box">
							<textarea placeholder="请填写描述" v-model="dataform.content" :maxlength="maxLength"></textarea>
							<view class="num-text">
								{{supplementText.length}}/{{maxLength}}
							</view>
						</view>
					</view>
					<view class="submit-btn" @click="addProductComplete">完成</view>
				</view>
			</view>
		</view>
		<view class="mask">

		</view>
	</view>
</template>

<script>
	import chooseKeywords from '../chooseKeywords.vue'
	export default {
		props:{
			init:{
				type: Object,
				default: ()=>({})
			},
			isEdit:{
				type: Number,
				default: 0
			}
		},
		components:{
			chooseKeywords
		},
		mounted() {
			this.csh();
			
		},
		data() {
			return {
				dataform: {

				},
				shopfrontPhotoList: [],
				maxLength: 200,
				supplementText: '', //描述
				advantages: [], //特色标签
				advantageIds: [],
				storeAdvantage:[],
			}
		},
		methods: {
			// advantageChecked(index) {
			// 	if (this.advantageIds.indexOf(index) != -1) {
			// 		let idx = this.advantageIds.indexOf(index)
			// 		this.advantageIds.splice(idx, 1);
			// 		this.advantageIds.splice(idx, 1)
			// 	} else {
			// 		this.advantageIds.push(index);
			// 		this.advantageIds.push(index)
			// 	}
			// },
			deleteImage(index) {
				this.shopfrontPhotoList.splice(index, 1)
			},
			csh(){
				let that = this
				if(this.isEdit){
					this.dataform = this.init;
					if(this.dataform.image){
						this.shopfrontPhotoList = this.dataform.image.trim().split(',');
					}
					if(this.dataform.keyword){
						this.dataform.keyword && this.dataform.keyword.split('/').forEach((item, index) => {
							if (this.advantages) {
								let ind = this.advantages.indexOf(item);
								if (ind == -1) {
									this.advantages.push(item)
									this.storeAdvantage.push(item)
									this.advantageIds.push(this.advantages.length - 1)
								}
							}
						
						})
					}
				}
			},
			selectPicture() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0,
				}, function(res) {
					that.shopfrontPhotoList.push(res.data.url)
				});
			},
			addProductComplete(){
				let p = {...this.dataform}
				if(!p.name){
					return this.$util.Tips({
						title: '请输入商品名称'
					});
				}
				if(!p.price){
					return this.$util.Tips({
						title: '请输入商品价格'
					});
				}
				p.image = this.shopfrontPhotoList.join(',');
				p.keyword = this.storeAdvantage.join('/');
				if(this.isEdit == 1){
					this.$emit('toEdit',p)
				}else{
					this.$emit('toAdd',p)
				}
				
				console.log(this.dataform);
				console.log(this.advantageIds)
				
			},
			close() {
				this.dataform={}
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.white-bg {
		width: 100%;
		height: 90vh;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 30rpx 30rpx 0px 0px;
		background: rgba(255, 255, 255, 1);
		z-index: 99;
	}

	.title {
		padding: 30rpx 30rpx 0;
		font-size: 32rpx;
		font-weight: 400;
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx 30rpx 0px 0px;

		.close {
			width: 40rpx;
			height: 40rpx;
			transform: rotate(45deg);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content-box {
		height: 90vh;
		overflow-y: scroll;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 98;
		transition: all 0.3s ease-in-out;
	}
</style>